<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>学生成绩列表</title>
	<link rel="stylesheet" href="${ssy}/resources/css/font.css">
	<link rel="stylesheet" href="${ssy}/resources/css/weadmin.css">
	<link rel="stylesheet" href="${ssy}/resources/layui/css/layui.css">
</head>
<style>
	.layui-form-select dl {
		max-height: 152px;
	}
</style>
<body>
<!-- 搜索模块 -->
<div class="layui-form layui-form-pane" id="searchForm1">
	<div class="layui-form-item ">
		<div class="layui-inline">
			<label class="layui-form-label">学生姓名:</label>
			<div class="layui-input-inline">
				<input class="layui-input" name="studentName"  id="studentName"  placeholder="学生姓名">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">学号:</label>
			<div class="layui-input-inline">
				<input class="layui-input" name="studentNumber" id="studentNumber" placeholder="学号">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">班级名称:</label>
			<div class="layui-input-inline">
				<input class="layui-input" name="className" id="className" placeholder="班级名称">
			</div>
		</div>
	</div>
		<div class="layui-form-item ">
			<div class="layui-inline">
				<label class="layui-form-label">授课教师:</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="teacherName" id="teacherName" placeholder="授课教师">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">课程名称:</label>
				<div class="layui-input-inline">
					<select id="courseName" name="courseName">
						<option value="">请选择课程</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">专业:</label>
				<div class="layui-input-inline">
					<select id="majorName" name="majorName">
						<option value="">请选择专业</option>
					</select>
				</div>
			</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn"><span class='layui-icon'>&#xe615;</span>搜索</button>
				<button type="reset" id="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</div>
	</div>
</div>

<!--添加 更新 -->
<script type="text/html" id="modifyData">
	<form class="layui-form layui-form-pane" lay-filter="dataFormFilter" id="searchForm" style="margin-top: 15px;margin-left:5px;">
		<div class="layui-col-md12 layui-col-xs12">
			<div class="layui-form-item" style="text-align: center;">
				<input type="hidden" name="scoreId">
				<div class="layui-inline">
					<label class="layui-form-label">学号:</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="studentNumber2" name="studentNumber" lay-verify="number" placeholder="请输入学号">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">课程名称:</label>
					<div class="layui-input-inline">
						<select id="courseName2" name="courseName">
							<option value="">请选择课程</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin-left:25px;">
				<div class="layui-inline">
					<label class="layui-form-label">成绩:</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="fraction" lay-verify="number" placeholder="请输入成绩">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<input type="hidden" lay-filter="subBtn" id="subBtn" lay-submit />
			</div>
		</div>
	</form>
</script>

<!-- 数据表格  lay-filter：监听属性-->
<table id="dataTable" lay-filter="dataTableFilter" ></table>

<!-- 头工具栏 -->
<script type="text/html" id="headBtn">
	<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add"><span class="layui-icon">&#xe61f;</span>新增成绩</button>
	<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="del"><span class="layui-icon">&#xe640;</span>批量删除</button>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update" ><span class="layui-icon">&#xe642;</span>编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delOneUser" ><span class="layui-icon">&#xe640;</span>删除</a>
</script>

<script type="text/javascript" src="${ssy}/resources/layui/layui.js"></script>
<script type="text/javascript">
	//=======================初始化layui===========================
	layui.use(['jquery','layer','table','form','laydate'],function(){
		var $ = layui.jquery;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var laydate=layui.laydate;

		//=========================更新渲染table=============================
		var tb = table.render({
			id:'dataTable',
			elem:'#dataTable',
			url:'${ssy}/score.do?type=scoreList',
			page:true,//开启分页
			height:525,
			toolbar:"#headBtn",//开启头工具栏
			cols:[[
				{type:'checkbox'},
				{field:'scoreId',title:'ID',width:80,sort: true,align:"center"},
				{field:'studentNumber', title: '学号',align:"center"},
				{field:'studentName', title: '姓名',width:110,align:"center"},
				{field:'studentSex',title:'性别',width:100,align:"center",templet:function(d){
						if(d.studentSex=='男'){
							return "<font color='green'>男</font>"
						}else if(d.studentSex=='女'){
							return "<font color='red'>女</font>"
						}else{
							return "";
						}
					}},
				{field:'majorName',title:'专业名称',align:"center"},
				{field:'className',title:'班级名称',width:180,align:"center"},
				{field:'courseName',title:'课程名称',align:"center"},
				{field:'teacherName',title:'教师名称',align:"center"},
				{field:'fraction',title:'成绩',sort: true,align:"center",templet:function (d) {
                        if(d.fraction>=60){
                            return "<font color='green'>"+d.fraction+"</font>"
                        }else if(d.fraction<60){
                            return "<font color='red'>"+d.fraction+"</font>"
                        }else{
                            return "0";
                        }
                    }},
				{field:'操作',title:'操作',toolbar:"#rowBtns",align:"center"}
			]],
			parseData:function(res){ //res 即为原始返回的数据
				return {
					"code": res.code, //解析接口状态
					"msg": res.msg, //解析提示文本
					"count": res.data.count, //解析数据长度
					"data": res.data.list //解析数据列表
				};
			},
			done: function(res, curr, count){
				if(res.data.length==0&&curr!=1){
					tb.reload({
						page:{
							curr:(curr-1)
						}
					});
				}
			},
			response:{
				statusCode: 200
			}
		});
		/*=========================搜索按钮搜索======================*/
		$("#searchBtn").click(function(){
			/*tb表格对象      reload表格重载 */
			tb.reload({
				where: {
					'studentName':$("#studentName").val(),
					'studentNumber':$("#studentNumber").val(),
					'className':$("#className").val(),
					'teacherName':$("#teacherName").val(),
					'courseName':$("#courseName").val(),
					'majorName':$("#majorName").val(),
				}
			});
		});

		// 重置事件
		$("#reset").click(function () {
			$("#studentName").val("");
			$("#studentNumber").val("");
			$("#className").val("");
			$("#teacherName").val("");
			$("#courseName").val("");
			$("#majorName").val("");
			form.render();
		})

		//加载查询条件的下拉列表
		$.get("${ssy}/student.do?type=major",function(data){
			var searchmajor=$("#majorName");
			var html='<option value="">请选择专业</option>'
			$.each(data.data,function(i,item){
				html+='<option value="'+item.mId+'">'+item.majorName+'</option>'
			});
			searchmajor.html(html);
			form.render();
		})

        $.get("${ssy}/curriculum.do?type=courseList",function(data){
            var searchcourseName=$("#courseName");
            var html='<option value="">请选择课程</option>'
            $.each(data.data,function(i,item){
                html+='<option value="'+item.courseId+'">'+item.name+'</option>'
            });
            searchcourseName.html(html);
            form.render();
        })

		//==================监听头工具栏事件=================
		table.on("toolbar(dataTableFilter)",function(obj){
			switch(obj.event){//dataTableFilter 表格监听属性值
				case 'add':
					addScore();
					break;
				case 'del':
					bathdelScore();
					break;
			};
		});
//=====================行监听事件=================================
		table.on("tool(dataTableFilter)",function(d){
			var data=d.data;//获取行数据
			//获取事件
			var event = d.event;
			if (event=='update'){
				updateScore(data);
			}else if (event=='delOneUser'){
				delOneScore(data);
			}
		})
		//=====================删除单个========================
		function delOneScore(data) {
			layer.confirm('您确定删除吗？',function(index){
				//obj.del();
				layer.close(index);
				$.post("${ssy}/score.do?type=deleteOneScore",{id:data.scoreId},function(rs){
					if(rs.code==200){
						tb.reload();
					}
					layer.msg(rs.msg);
				})
			});
		}

		//=====================修改  查看========================
		function updateScore(data1) {
			//更新
			layer.open({
				type:1,
				content:$("#modifyData").html(),
				btn: ['确认', '取消'],
				area:['700px','450px'],
				btnAlign: 'c',
				success:function(layero, index){
					$("#searchForm")[0].reset();//清空表单
					$.get("${ssy}/curriculum.do?type=courseList",function(data){
						var searchcourseName=$("#courseName2");
						var html='<option value="">请选择课程</option>'
						$.each(data.data,function(i,item){
							if(item.courseId==data1.courseId){
								html+='<option value="'+item.courseId+'" selected=selected>'+item.name+'</option>'
							}else{
								html+='<option value="'+item.courseId+'">'+item.name+'</option>'
							}
						});
						searchcourseName.html(html);
						form.render();
					})

					form.val("dataFormFilter",data1);
					$("#studentNumber2").attr("readonly",true);
					$('#courseName2').attr("disabled",true);

					//弹层完成时 渲染form表单
					form.render();
					//为更新form 绑定提交事件
					form.on("submit(subBtn)",function(d){
						$.post('${ssy}/score.do?type=updateScore',d.field,function(rs){
							//添加失败  展示失败信息
							if(rs.code != 200){
								layer.msg(rs.msg);
								return false;
							}
							layer.msg(rs.msg);
							//刷新列表
							$("#searchBtn").click();
							//关闭弹出层
							layer.close(index);
						});
						return false;
					});
				},
				yes:function(index){
					$("#subBtn").click();
				}
			});
		}

		//批量删除用户
		function bathdelScore() {
			var checkStatus = table.checkStatus('dataTable'); //idTest 即为基础参数 id 对应的值
			if(checkStatus.data.length == 0){
				layer.msg("请选择要删除的数据");
				return false;
			}

			layer.confirm("你确定要删除吗?",function(index){
				//获取被选中的数据
				var data = checkStatus.data;
				var id="";
				for(var i=0;i<data.length;i++){
					id = id + "id="+data[i].scoreId+"&";
				}
				dels(id);
				layer.close(index);
			});
		}

//=====================添加课程==================================
		function addScore(){
			layer.open({
				type:1,
				content:$("#modifyData").html(),
				btn: ['确认', '取消'],
				area:['700px','450px'],
				btnAlign: 'c',
				success:function(layero, index){
					$.get("${ssy}/curriculum.do?type=courseList",function(data){
						var searchcourseName=$("#courseName2");
						var html='<option value="">请选择课程</option>'
						$.each(data.data,function(i,item){
							html+='<option value="'+item.courseId+'">'+item.name+'</option>'
						});
						searchcourseName.html(html);
						form.render();
					})


					//弹层完成时 渲染form表单
					form.render();
					//为更新form 绑定提交事件
					form.on("submit(subBtn)",function(d){
						$.post('${ssy}/score.do?type=addScore',d.field,function(rs){
							//添加失败  展示失败信息
							if(rs.code != 200){
								layer.msg(rs.msg);
								return false;
							}
							layer.msg("添加成功");
							//刷新列表
							$("#searchBtn").click();
							//关闭弹出层
							layer.close(index);
						});
						return false;
					});
				},
				yes:function(index){
					$("#subBtn").click();
				}
			});
		}
//===========================删除用户================================
		function dels(ids){
			$.post('${ssy}/score.do?type=bathDeleteScore&'+ids,function(rs){
				if(rs.code != 200){
					layer.msg(rs.msg);
					return false;
				}
				layer.msg(rs.msg);
				//刷新列表
				$("#searchBtn").click();
			});
		}

	});

</script>
</body>
</html>